
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户权限管理系统</title>
<link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
    body {
        background: #f5f7fa;
        padding: 30px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }
    .card {
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        border: none;
        overflow: hidden;
    }
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        font-size: 1.4rem;
    }
    .table-responsive {
        max-height: 600px;
        overflow-y: auto;
    }
    .table th {
        background: #f8f9fa;
        position: sticky;
        top: 0;
        font-weight: 600;
        color: #495057;
    }
    .table td {
        vertical-align: middle;
        padding: 12px 15px;
    }
    .form-control, .form-select {
        border-radius: 6px;
        transition: all 0.3s;
        border: 1px solid #e0e0e0;
    }
    .form-control:focus, .form-select:focus {
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        border-color: #667eea;
    }
    .input-group-text {
        background-color: #f8f9fa;
    }
    .btn-action {
        border-radius: 6px;
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s;
    }
    .btn-primary {
        background: #667eea;
        border-color: #667eea;
    }
    .btn-primary:hover {
        background: #5a6fd1;
        transform: translateY(-2px);
    }
    .msg {
        color: #dc3545;
        font-size: 14px;
        margin-top: 10px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header">
            <i class="fas fa-users-cog mr-2"></i>用户权限管理系统
        </div>
        <div class="card-body">
            <form id="userForm" action="${pageContext.request.contextPath}/admin/updateAll" method="post">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>卡号</th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>套餐</th>
                                <th>预存金额</th>
                                <th>剩余金额</th>
                                <th>注册时间</th>
                                <th>状态</th>
                                <th>用户权限</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="user" items="${pagehelper.list}" varStatus="vs">
                                <tr>
                                    <input type="hidden" name="uList[${vs.index}].id" value="${user.id}">
                                    <td>${vs.count}</td>
                                    <td>
                                        <input type="text" class="form-control" name="uList[${vs.index}].card_number" 
                                               value="${user.card_number}" readonly>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" name="uList[${vs.index}].username" 
                                               value="${user.username}">
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input type="password" class="form-control" name="uList[${vs.index}].password" 
                                                   value="${user.password}">
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" 
                                                        onclick="togglePassword(this)"><i class="fas fa-eye"></i></button>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="form-select" name="uList[${vs.index}].plan_id">
                                            <c:forEach var="plan" items="${planList}">
                                                <option value="${plan.id}" ${user.plan_id==plan.id ? 'selected' : ''}>
                                                    ${plan.plan_name} (¥${plan.monthly_fee})
                                                </option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">¥</span>
                                            </div>
                                            <input type="number" class="form-control" name="uList[${vs.index}].prepaid_amount" 
                                                   value="${user.prepaid_amount}" min="0" step="0.01">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">¥</span>
                                            </div>
                                            <input type="number" class="form-control" name="uList[${vs.index}].balance" 
                                                   value="${user.balance}" readonly>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" name="uList[${vs.index}].register_time" 
                                               value="${user.register_time}" readonly>
                                    </td>
                                    <td>
                                        <select class="form-select" name="uList[${vs.index}].status">
                                            <option value="1" ${user.status=='1' ? 'selected' : ''}>正常</option>
                                            <option value="0" ${user.status=='0' ? 'selected' : ''}>异常</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="form-select" name="uList[${vs.index}].role">
                                            <option value="user" ${user.role=='user' ? 'selected' : ''}>普通用户</option>
                                            <option value="admin" ${user.role=='admin' ? 'selected' : ''}>管理员</option>
                                        </select>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between mt-4">
                    <div>
                        <button type="submit" class="btn btn-primary btn-action mr-3">
                            <i class="fas fa-save mr-2"></i>保存修改
                        </button>
                        <button type="button" class="btn btn-secondary btn-action" onclick="history.go(-1)">
                            <i class="fas fa-arrow-left mr-2"></i>返回
                        </button>
                    </div>
                    <div class="msg">${msg}</div>
                </div>
                
                <%@include file="pagehelper_plxg.jsp" %>
            </form>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
function togglePassword(button) {
    const inputGroup = button.closest('.input-group');
    const input = inputGroup.querySelector('input[type="password"], input[type="text"]');
    const icon = button.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}
    
    $(document).ready(function() {
        // 表单提交前验证
        $('#userForm').submit(function() {
            let isValid = true;
            $('input[type="number"]').each(function() {
                if ($(this).val() < 0) {
                    $(this).addClass('is-invalid');
                    isValid = false;
                } else {
                    $(this).removeClass('is-invalid');
                }
            });
            return isValid;
        });
    });
</script>
</body>
</html>
